<template>
  <div class='playlist-collected'>
    <div class="playlist-collected-thead" v-if="collectPlayListData.length">
      <i class='fs20 playlist-collected-title'>{{ profile.nickname }}收藏的歌单({{collectPlayListData.length}})</i>
    </div>
    <ul class='recommend-body mt20'>
      <li class='fl' v-for='item in collectPlayListData' :key=item.id>
        <div class='wrap posi-rel disinblock cursor-pointer' @click="routerPlaylist(item.id)">
          <img  :src=item.coverImgUrl alt="" class='song-sheet-img'>
          <a class='posi-ab disinblock playlist-wrap' :title=item.name @click.prevent="routerPlaylist(item.id)"></a>
          <div class="bottom posi-ab">
            <!-- 耳机图标 -->
            <span class='headset fl'></span>
            <!-- 播放量 -->
            <span class='play-amount fl fs12'>{{ item.playCount | handlerPlayCount }}</span>
            <!-- 播放图标 -->
            <span class='icon-play fr'>
              <a href="" class='disinblock'></a>
            </span>
          </div>
        </div>
        <p>
          <a :title=item.name @click="routerPlaylist(item.id)">{{ item.name }}</a>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    name: 'playlistCollected',
    props: ['userData', 'collectPlayList'],
    data() {
      return {
        collectPlayListData: [],
        profile: {},
      }
    },
    watch: {
      userData() {
        this.userList = this.userData
        this.profile = this.userData.profile
      },
      collectPlayList() {
        this.collectPlayListData = this.collectPlayList
      }
    },
    methods: {
      routerPlaylist(id){
        this.$router.push({path:'/playlist', query:{ id: id}})
      }
    }
}
</script>

<style lang='less' scoped>
@songSheetWidth: 140px;
@songSheetHeight: 140px;
  .playlist-collected-thead {
      height: 30px;
      line-height: 30px;
      padding-bottom: 5px;
      border-bottom: 2px solid #c20c0c;
  }
  .recommend-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    li {
      height: 235px;
      padding: 10px;
      .wrap {
        width: 140px;
        height: auto;
        .song-sheet-img, .playlist-wrap {
          width: 100%;
          height: 100%;
        }
        .playlist-wrap {
          top: 0;
          left: 0;
          background: url('../../../assets/coverall.png');
        }
        .bottom {
          height: 25px;
          background: rgba(0,0,0);
          opacity: 0.5;
          bottom: 0;
          width: 100%;
          .headset {
            width: 14px;
            height: 11px;
            margin: 7px 8px;
            background: url('../../../assets/iconall.png') 0 -24px;
          }
          .play-amount {
            color: #fff;
            font-weight: 400;
            line-height: 25px;
          }
          .icon-play {
            width: 16px;
            height: 16px;
            margin: 4px 8px;
            background: url('../../../assets/iconall.png') 0 0px;
            &:hover {
              background: url('../../../assets/iconall.png') 0 -60px;
            }
            a {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      p {
        width: @songSheetWidth;
        font-size: 14px;
      }
    }
  }
</style>